import React, { useState } from 'react';

export type Drag = {
    src: string,
    innerWidth: number,
    innerHeight: number
};

const minScale = 0.5, maxScale = 4, isPointerdown = false, point = { x: 0, y: 0 }, diff = { x: 0, y: 0 }, lastPointermove = { x: 0, y: 0 };

const DragImage: React.FC<Drag> = ({ src, innerWidth, innerHeight }) => {

    const [x, setX] = useState<number>(0);
    const [y, setY] = useState<number>(0);
    const [scale, setScale] = useState<number>(1);

    return (
        <div style={{ width: '100%', height: '100%' }}>
            <img style={{ width: '100%', height: '100%', transform: `translate3d(${x}px, ${y}px, 0) scale(${scale})` }} src={src} alt="" onLoad={() => {
                result = getImgSize(image.naturalWidth, image.naturalHeight, innerWidth, innerHeight);
                image.style.width = result.width + 'px';
                image.style.height = result.height + 'px';
                x = (window.innerWidth - result.width) * 0.5;
                y = (window.innerHeight - result.height) * 0.5;
                image.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0) scale(1)';
                // 拖拽查看
                drag();
                // 滚轮缩放
                wheelZoom();
            }} />
        </div>
    );
};

export default DragImage;
